<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios简化</title>
	</head>
	<body>
		<script src="../js/axios.js">		
		</script>
		<script type="text/javascript">
			/**
			 * 实现get请求，获取数据 参数id =1
			 * 方式1:url?id=1
			 * 方式2:url/1
			 * 方式3:url,{params}
			 */
			axios.get("http://localhost:8090/getUserById",{
				params: {
					id : 1
				}
			}).then( result => {
				console.log(result.data)
			})
			//函数的定义
			async function getUser(){
				//以前通过then的方式接收返回值的结果，现在通过await可以直接获取返回值
			let result = await axios.get("http://localhost:8090/getUserById",{
					params:{id:3}
				})
				console.log("axios的简化操作")
				console.log(result.data)
			}
			//解构赋值操作通过对象的方式，从其中获取需要的数据进行展示 {data:result}
			async function getUser2(){
				//以前通过then的方式接收返回值的结果，现在通过await可以直接获取返回值
			const {data:result,status:code} = await axios.get("http://localhost:8090/getUserById",{
					params:{id:3}
				})
				//解构赋值(result不是promise对象，是解构的值)
				console.log("解构赋值")
				console.log(code)
				console.log(result)
			}
			
			//函数的调用
			getUser()
			getUser2()
			/**
			 * 解构赋值优势,回调地狱问题
			 */
			// axios.get("url").then(result =>{
			// 	axios.get("url2",{
			// 		params:result.data
					
			// 	}).then( result2=>{
					
			// 	})
			// })
			// $.get("url",function(data){
			// 	$.get("url",data,function(data2){
					
			// 	})
			// })
			// async function aa(){
			// 	const{data:result1} = await axios.get(url1)
			// 	const{data:result2} = await axios.get(url2,result1)
			// }
		</script>
	</body>
</html>
 